import React, { Component } from 'react';
import { Table, Message } from '@alifd/next';
import IceContainer from '@icedesign/container';
import eventProxy from '../../../../../libs/eventProxy';
import { Forest } from '../../../../../libs/Tree';
import { orgs, update, del } from '../../../../../api/Org';
import { areas } from '../../../../../api/Area';
import DeleteBalloon from '../../../../../libs/DeleteBalloon';
import EditDialog from '../EditDialog';
  
export default class TreeTable extends Component {
  static displayName = 'TreeTable';

  static propTypes = {
  };
   myprops={};
  static defaultProps = {};
  constructor(props) {
    super(props);
    this.state = {
      sourceData: [],
      showData: [],
      areaDict:{},
    };
  }

  componentWillMount() {
    eventProxy.on('orgs:select:change', () => {
      this.updateTable();
    });
  }
  componentDidMount() {
    this.updateTable();
  }
  updateTable(){
    orgs().then((response) => {
      const data = response.data.data;
      const roots = this.dataToTree(data);
      areas().then((areaRes) => {
        const areaObj = {};
        const source = areaRes.data.data; 
        source.forEach((ele) => {
          areaObj[ele.id] = ele.name;
        });
        this.setState({
          sourceData: data,
          showData: roots,
          refresh: false,
          areaDict: areaObj,
        });
      });
    });
  }
  dataToTree= (dataSource) => {
    const forest = new Forest();
    dataSource.forEach((menu) => {
        menu.pid = menu.parentId;
        menu.children = [];
        forest.init(menu);
    });
    return forest.roots;
  }

  onConfirm = (id) => {
    del({
      params: {
        ids: id,
      },
    }).then((response) => {
      const data = response.data;
      if (data.code === 200){
        Message.success('删除成功');
        eventProxy.trigger('orgs:select:change');
      } else {
        Message.warning('删除失败');
      }
    });
  }
  getFormValues = (dataIndex, values) => {
    console.log(values);
    const items = {
      id: values.id,
      name: values.name,
      areaId: values.areaId,
      type: values.type,
    };
    update(items).then((response) => {
      const code = response.data.code;
      if (code === 200){
        Message.success('修改成功');
        // 刷新列表
        const sources = this.state.sourceData;
        for (let index = 0; index < sources.length; index++) {
          const ele = sources[index];
          if (ele.id === values.id) {
            sources[index] = values;
            break;
          }
        }
        const shows = this.dataToTree(sources, this.state.systemCode);
        this.setState({
          showData: shows,
        });
      } else {
        Message.warning('修改失败');
      }
    });
  }
  render() {
    const isZebra = true;
    const renderOpt = (value, index, record) => {
      return (
        <span>
          <EditDialog
            index={index}
            record={record}
            getFormValues={this.getFormValues}
          />
        <DeleteBalloon handleRemove={() => this.onConfirm(record.id)} />
        </span>
      );
  };
  const renderArea = (value, index, record) => {
    return (
      <span>
        {this.state.areaDict[value]}
      </span>
    );
  };

  const renderType = (value, index, record) => {
    let label = '';
    if (value === '0'){
      label = '机构';
    } else if (value === '1') {
      label = '部门';
    }
    return (
      <span>
        {label}
      </span>
    );
  };
    return (
      <IceContainer>
        <Table
          dataSource={this.state.showData}
          primaryKey="id"
          isTree
          isZebra={isZebra}
          align="center"
          rowSelection={{ onChange: () => {} }}
        >
          <Table.Column title="机构名称" dataIndex="name" />
          <Table.Column title="机构类型" dataIndex="type" cell={renderType} />
          <Table.Column title="所属区域" dataIndex="areaId" cell={renderArea} />
          <Table.Column title="编辑" cell={renderOpt} />
        </Table>
      </IceContainer>
    );
  }
}
